<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 姓名 -->
        <VanField
          v-model="u_name"
          name="u_name"
          label="姓名"
          placeholder="姓名"
          :rules="[
            {
              pattern: nameRules,
              required: true,
              message: '请输入正确的姓名',
              validateEmpty: true,
            },
          ]"
        />

        <!-- 手机号码 -->
        <VanField
          v-model="u_phone"
          name="phone"
          label="手机号码"
          placeholder="手机号"
          :rules="[
            {
              pattern,
              required: true,
              message: '请输入正确的手机号',
              validateEmpty: true,
            },
          ]"
        />
        <!-- 身份证 -->
        <VanField
          v-model="u_card"
          type="password"
          name="idcard"
          label="身份证号码"
          placeholder="身份证"
          :rules="[
            {
              validator,
              required: true,
              message: '请填写正确的身份证号码',
              validateEmpty: true,
            },
          ]"
        />
        <!-- 密码 -->
        <VanField
          v-model="u_pwd"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[
            {
              pattern: pwdRules,
              required: true,
              message: '请填写密码',
              validateEmpty: true,
            },
          ]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <VanButton round block @click="submit" type="primary">
          确认注册
        </VanButton>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import httpApi from "@/http";
import router from "@/router";
import { showFailToast, showSuccessToast } from "vant";
import { ref } from "vue";
// 电话号码验证
let pattern = /^1[3-9]\d{9}$/;
// 姓名验证
let nameRules = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
// 密码验证
let pwdRules = /^[\w_-]{6,16}$/;
// 身份证验证
const validator = (val: any) =>
  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
    val
  );

let u_name = ref();
let u_phone = ref();
let u_card = ref();
let u_pwd = ref();
let u_id = ref();

const onSubmit = (values: any) => {
  console.log("submit", values);
};
const submit = function () {
  u_id = u_id.value;
  u_name = u_name.value;
  u_phone = u_phone.value;
  u_card = u_card.value;
  u_pwd = u_pwd.value;
  let params = { u_id, u_name, u_phone, u_card, u_pwd };
  httpApi.UserApi.zhuce(params).then((res) => {
    console.log("注册信息为：", res);
    console.log(params)
    if (res.data.code == 200 && res.config.data!='') {
      showSuccessToast("注册成功，自动为您跳转到登录页");
      router.push(`/login`);
    } else {
      showFailToast("注册失败,自动退出并重试");
      router.push(`/login`);
    }
  });
};
</script>

<style scoped>
@import url("../../../node_modules/vant/lib/index.css");
</style>

